<template>
	<view class="shop">
		<view class="shop-item">
			<view class="shop-img">
				<image class="shop-img" src="../../static/img/sw-3.jpg" mode=""></image>
			</view>
			<scroll-view scroll-x="true" class="scroll-content">
				<commodity 
				:commodity-list="commodityList" 
				:item-width="250" 
				:cover-height="250"
				wrap="no-wrap"></commodity>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Commodity from '@/components/common/Commodity.vue'
	export default {
		components: {
			Commodity
		},
		data() {
			return {
				commodityList: [
						{
							id:1,
							cover: '../../static/img/item-1-1.jpg',
							title: '英国 VixxEE 咖啡杯',
							originalPrice: '130',
							currentPrice: '100',
							discount:5.2,
						},
						{
							id:2,
							cover: '../../static/img/item-1-1.jpg',
							title: '英国 VixxEE 咖啡杯',
							originalPrice: '130',
							currentPrice: '100',
							discount:5.2,
						},
						{
							id:3,
							cover: '../../static/img/item-1-1.jpg',
							title: '英国 VixxEE 咖啡杯',
							originalPrice: '130',
							currentPrice: '100',
							discount:5.2,
						},
						{
							id:4,
							cover: '../../static/img/item-1-1.jpg',
							title: '英国 VixxEE 咖啡杯',
							originalPrice: '130',
							currentPrice: '100',
							discount:5.2,
						},
						{
							id:5,
							cover: '../../static/img/item-1-1.jpg',
							title: '英国 VixxEE 咖啡杯',
							originalPrice: '130',
							currentPrice: '100',
							discount:5.2,
						}
					]
			}
		}
	}
</script>

<style scoped>
	.shop-img {
		width: 100%;
		height: 350rpx;
	}
	.scroll-content {
		white-space: nowrap;
	}
</style>